<template>
	<!-- #ifdef H5 -->
		<view class="subtitles" v-html='subtitles'></view>
	<!-- #endif -->
	<!-- #ifdef APP-PLUS -->
		<rich-text class="subtitles" :nodes="nodes" :style="videoBox">
	<!-- #endif -->
	</rich-text>
</template>

<script>
	export default {
		props: {
			currentTime: {
				type: Number
			},
			subtitlesUrl: {
				type: String,
				default: () => 'https://dl.opensubtitles.org/zh/download/file/1958505141'
			},
			fullScreenStatus: {
				type: Boolean,
				default: false
			}
			
		},
		data() {
			return {
				subtitlesArray: [],
				subtitles: '',
				nodes: [{
						name: 'div',
						attrs: {
								class: 'div-class',
								style: 'line-height: 60px; color: #fff; text-align:center;font-weight:bolder;font-size:30rpx;'
						},
						children: [{
								type: 'text',
								text: ''
						}]
				}],
				videoBox: ''
			}
		},
		methods: {
			createSrtArr(srt) {
				let arr = srt.split(/\n\n|\r\r|\r\n\r\n/)
				let result = []
				arr.forEach(item => {
					let srtObj = {}
					let containArr = item.split(/\n/)

					if (containArr[1]) {
						//此处正则用于取出00:00:00，213 --> 00:00:00，213这种结构，防止可能存在于此行的x，y坐标对后续处理造成影响
						var reg = /^(\d{2}):(\d{2}):(\d{2})[\.,](\d{1,3}) --\> (\d{2}):(\d{2}):(\d{2})[\.,](\d{1,3})/g
						let regResult = reg.exec(containArr[1])
						if (regResult) {
							let timeSplit = regResult[0].split(' --> ')
							srtObj.from = this.getSeconds(timeSplit[0])
							srtObj.to = this.getSeconds(timeSplit[1])
							//这里的两个replace主要是将srt中可能携带的font标签转化为易用的span，当时遇到了如果是font标签的话没办法继承父元素的字体大小的问题，题外话：本次字母字体大小采用了媒体查询进行设置
							srtObj.htmlText = containArr.slice(2).join(`\n`).replace(/\<font/g, '<span').replace(/\<\/font/g,
								'</span')
							result.push(srtObj)
						}
					}
				})
				return result
			},
			//将srt中的字符串时间转化为所需要的格式，这里转化成了秒数
			getSeconds(val) {
				let arr = val.split(/\,|\./)
				let sec = 0
				let a = arr[0].split(':')
				sec = Number(a[0]) * 60 * 60 + Number(a[1]) * 60 + Number(a[2]) + arr[1] / 1000
				return sec
			},
			getSubtitle(currentTime, arr) {
			    let left = 0;
					let right = arr.length - 1;
					while (left <= right) {
						let mid = Math.floor((left + right) / 2);
						if (currentTime >= arr[mid].from && currentTime <= arr[mid].to) {
								return arr[mid].htmlText;
						} else if (currentTime < arr[mid].from) {
								right = mid - 1;
						} else {
								left = mid + 1;
						}
				}
				return null; // 如果未找到匹配的时间段，则返回null或者其他您认为合适的值
			}
		},
		watch: {
			currentTime(value){
			 //根据字幕切换选择所需要的字幕数组
				 //赋值给subtitleText，此值用v-html进行了绑定，绑定到了对应的字幕显示区域
				 // #ifdef H5
				 value = value / 1000
				 // #endif
				 const res = this.getSubtitle(value,this.subtitlesArray) || ''
				 if (this.subtitlesArray.length) {
					 // #ifdef APP-PLUS
						this.nodes[0].children[0].text =res
					 // #endif
					 // #ifdef H5
						this.subtitles = res
					 // #endif
				 }
			 },
			 subtitlesUrl: {
				 handler(value) {
					 uni.request({
					   url: value,
					   method: 'get',
					   success: (res) => {
							 console.log('res666', res);
							 this.subtitlesArray = this.createSrtArr(res.data)
							 console.log('this.subtitlesArray', this.subtitlesArray);
					   },
					   fail: function(err) {
					     console.log(err);
					   }
					 })
				 },
				 immediate: true
			 },
			 fullScreenStatus: {
			 	handler () {
			 		let res = uni.getSystemInfoSync()
			 		this.videoBox = `width:${res.windowWidth - 50}px;`
			 	},
			 	immediate:true
			 }
		}
	}
</script>

<style>
	.subtitles {
		font-size: 30rpx;
		position: absolute;
		bottom: 100rpx;
		left: 25px;
		width: 700rpx;
		text-align: center;
		line-height: 30rpx;
		color: #fff;
	}
</style>